<template>
  <div class="big-screen">
    <Header :title="title" />
    <div class="w-full" style="height: calc(100% - 105px)">
      <el-row :gutter="4" class="h-full">
        <!-- 左侧 -->
        <el-col :span="7">
          <!-- 门诊急诊人次 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">门诊急诊人次</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TrendChart class="w-full h-full" :data="trendData" />
            </dv-border-box12>
          </div>
          <!-- 出院人次 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">出院人次</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TrendChart class="w-full h-full" :data="trendData2" />
            </dv-border-box12>
          </div>
          <!-- 三四级手术人次 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">三四级手术人次</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TrendChart
                class="w-full"
                style="height: 99%"
                :data="trendData3"
              />
            </dv-border-box12>
          </div>
        </el-col>
        <!-- 中间 -->
        <el-col :span="10">
          <div class="h-3/5">
            <div class="w-1/4 h-4 mx-2 model-title">信息概览</div>
            <el-row :gutter="2" class="h-full">
              <el-col :span="8" class="h-full datav-border">
                <!-- 门急诊业务量 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      门急诊业务量/<span class="text-sm">人次</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in outpatientData"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
                <!-- 住院业务量 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      住院业务量/<span class="text-sm">人次</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in hospitaltData"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
              </el-col>
              <el-col :span="8" class="h-full datav-border">
                <!-- 日收入、总执行率 -->
                <div class="h-full">
                  <dv-border-box12
                    class="w-full p-2"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <div class="h-2/6 flex flex-col justify-center items-center font-bold">
                      <span class="text-xl">{{ date }} 收入</span>
                      <span class="text-4xl text-cyan-400">
                        {{ money }}<span class="text-xl text-white ml-2">万元</span>
                      </span>
                    </div>
                    <div class="h-4/6">
                      <WaterLiquid class="w-full h-full" :data="WaterLiquidData" />
                    </div>
                  </dv-border-box12>
                </div>
              </el-col>
              <el-col :span="8" class="h-full datav-border">
                <!-- 门急诊收入 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      门急诊收入/<span class="text-sm">万元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in outpatientData"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value2 }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
                <!-- 住院收入 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      住院收入/<span class="text-sm">万元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in hospitaltData"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value2 }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="h-2/5">
            <div class="w-1/4 h-4 mx-2 model-title">收入总览</div>
            <el-row :gutter="2" class="h-full">
              <el-col :span="8" class="h-full datav-border">
                <!-- 门急诊次均收费 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      门急诊次均收费/<span class="text-sm">元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in outpatientMoney"
                        class="text-sm flex justify-between h-4 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
                <!-- 住院次均收费 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      住院次均收费/<span class="text-sm">元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in hospitalMoney"
                        class="text-sm flex justify-between h-4 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
              </el-col>
              <el-col :span="8" class="h-full datav-border">
                <!-- 药品收入 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      药品收入/<span class="text-sm">万元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in medicineMoney"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
                <!-- 卫生耗材收入 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      卫生耗材收入/<span class="text-sm">万元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in consumableMoney"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
              </el-col>
              <el-col :span="8" class="h-full datav-border">
                <!-- 检查检验收入 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      检查检验收入/<span class="text-sm">万元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in detectionMoney"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
                <!-- 劳务收入 -->
                <div class="h-1/2">
                  <dv-border-box12
                    class="w-full p-4"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <h4 class="text-blue-400">
                      劳务收入/<span class="text-sm">万元</span>
                    </h4>
                    <ul>
                      <li
                        v-for="item in workMoney"
                        class="text-sm flex justify-between h-8 mx-4 leading-8"
                      >
                        <span>{{ item.name }}</span>
                        <span class="text-xl font-bold text-cyan-400">{{ item.value }}</span>
                      </li>
                    </ul>
                  </dv-border-box12>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="7">
          <!-- 门急诊收入 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">门急诊收入</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TrendChart class="w-full h-full" :data="trendData4" />
            </dv-border-box12>
          </div>
          <!-- 住院收入 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">住院收入</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TrendChart class="w-full h-full" :data="trendData5" />
            </dv-border-box12>
          </div>
          <!-- 医疗收入 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">医疗收入</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TrendChart
                class="w-full"
                style="height: 99%"
                :data="trendData6"
              />
            </dv-border-box12>
          </div>
        </el-col>
      </el-row>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";
const title = ref<string>("科主任驾驶舱");

// 引入趋势图
import TrendChart from "./components/trendChart.vue";
// 定义纵坐标（测试数据）
const xData = ref<Array>([
  "2024-04-29",
  "2024-04-30",
  "2024-05-01",
  "2024-05-02",
  "2024-05-03",
  "2024-05-04",
  "2024-05-05"
]);
// 生成随机数
const generateRandomNumbers = (count, min, max) => {
  const randomNumbers = [];
  for (let i = 0; i < count; i++) {
    let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    randomNumbers.push(randomNumber);
  }
  return randomNumbers;
};
// 门诊急诊人次
const trendData = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(7, 700, 1000),
  valueLast: generateRandomNumbers(7, 700, 1000),
  color: [
    ["rgba(219, 179, 110, 0.4)", "rgba(219, 179, 110, 1)"],
    ["rgba(51, 204, 204, 0.4)", "rgba(51, 204, 204, 1)"]
  ],
  unit: "人次"
});
// 出院人次
const trendData2 = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(7, 650, 850),
  valueLast: generateRandomNumbers(7, 650, 850),
  color: [
    ["rgba(219, 179, 110, 0.4)", "rgba(219, 179, 110, 1)"],
    ["rgba(51, 204, 204, 0.4)", "rgba(51, 204, 204, 1)"]
  ],
  unit: "人次"
});
// 三四级手术人次
const trendData3 = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(7, 350, 450),
  valueLast: generateRandomNumbers(7, 350, 450),
  color: [
    ["rgba(219, 179, 110, 0.4)", "rgba(219, 179, 110, 1)"],
    ["rgba(51, 204, 204, 0.4)", "rgba(51, 204, 204, 1)"]
  ],
  unit: "人次"
});
// 门急诊收入
const trendData4 = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(7, 800, 1000),
  valueLast: generateRandomNumbers(7, 800, 1000),
  color: [
    ["rgba(23, 126, 244, 0.4)", "rgb(23, 126, 244, 1)"],
    ["rgba(64, 155, 92, 0.4)", "rgba(64, 155, 92, 1)"]
  ],
  unit: "万元"
});
// 住院收入
const trendData5 = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(7, 1000, 1300),
  valueLast: generateRandomNumbers(7, 1000, 1300),
  color: [
    ["rgba(23, 126, 244, 0.4)", "rgba(23, 126, 244, 1)"],
    ["rgba(51, 204, 204, 0.4)", "rgba(64, 155, 92, 1)"]
  ],
  unit: "万元"
});
// 医疗收入
const trendData6 = reactive<object>({
  xData: xData.value,
  valuePrev: generateRandomNumbers(7, 1500, 2000),
  valueLast: generateRandomNumbers(7, 1500, 2000),
  color: [
    ["rgba(23, 126, 244, 0.4)", "rgba(23, 126, 244, 1)"],
    ["rgba(51, 204, 204, 0.4)", "rgba(64, 155, 92, 1)"]
  ],
  unit: "万元"
});

// 概览数据
// 门急诊业务量 & 收入
const outpatientData = reactive<Array>([
  { name: "门急诊量", value: 30000, value2: 6743.5 },
  { name: "月累计", value: 3000, value2: 2743.5 },
  { name: "月同期", value: 2500, value2: 3743.5 },
  { name: "年累计", value: 20000, value2: 5743.5 },
  { name: "年同期", value: 18000, value2: 4743.5 }
]);
// 住院业务量 & 收入
const hospitaltData = reactive<Array>([
  { name: "住院人数", value: 13000, value2: 8743.5 },
  { name: "月累计", value: 3000, value2: 3743.5 },
  { name: "月同期", value: 2500, value2: 4743.5 },
  { name: "年累计", value: 8000, value2: 6743.5 },
  { name: "年同期", value: 9500, value2: 7743.5 }
]);
// 获取月、日
const now = new Date();
const month = now.getMonth() + 1;
const day = now.getDate();
const date = month + " 月 " + day + " 日 ";
const money = 378.65;
// 水球图
import WaterLiquid from "./components/waterLiquid.vue";
const WaterLiquidData = ref<Number>(0.6733);

// 收入概览
// 门急诊次均收入
const outpatientMoney = reactive<Array>([
  { name: "年累计", value: 20000 },
  { name: "年同比", value: 2700 },
  { name: "去药耗", value: 2800 },
  { name: "去药耗年同比", value: 19800 }
]);
// 住院次均收入
const hospitalMoney = reactive<Array>([
  { name: "年累计", value: 30000 },
  { name: "年同比", value: 3000 },
  { name: "去药耗", value: 2500 },
  { name: "去药耗年同比", value: 20000 }
]);
// 药品收入
const medicineMoney = reactive<Array>([
  { name: "年累计", value: 7000 },
  { name: "年同比", value: 6800 }
]);
// 卫生耗材收入
const consumableMoney = reactive<Array>([
  { name: "年累计", value: 1200 },
  { name: "年同比", value: 1300 }
]);
// 检查检验收入
const detectionMoney = reactive<Array>([
  { name: "年累计", value: 4000 },
  { name: "年同比", value: 3900 }
]);
// 劳务收入
const workMoney = reactive<Array>([
  { name: "年累计", value: 3100 },
  { name: "年同比", value: 2800 }
]);
</script>

<style scoped lang="scss"></style>
